![\"Form](\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2018\/09\/FEATURED-Form-Layout-10-Tips-to-Structure-Your-Forms.jpeg\")
<\/p>\n<\/p>\n
Form layout is a crucial element of form design that many designers and website managers neglect. They fret over the landing page on which the form resides<\/a>, but fail to think about the physical structure of the form itself.<\/p>\n In today\u2019s article, we\u2019d like to go over some simple-to-make form layout changes that will have a positive impact on conversions.<\/p>\n <\/p>\n [content_upgrade cu_id=\"12816\"]Free download: 6 Examples of Well-Designed Forms[content_upgrade_button]Click Here[\/content_upgrade_button][\/content_upgrade]<\/p>\n If you\u2019re transposing a paper form to a web page, you might be tempted to duplicate its layout, but people use paper forms and web forms differently. If you simply convert a paper form without any changes, you\u2019ll probably reduce your conversions.<\/p>\n When you design a paper form, you\u2019re constrained by space. You have to fit everything on to the page. The result is usually a cramped, cluttered mess that fits, but doesn\u2019t consider usability. It\u2019s often hard to tell which field the form labels align with.<\/p>\n When you design web forms, don\u2019t be afraid to use space. Build whitespace between fields. Use separators, background colors, conditional logical<\/a>, and multiple pages<\/a> to create logical divisions and comfortable usability.<\/p>\n Free floating forms are messy and hard to decipher. Users may not be sure where the form begins or ends, or whether the copy and images above and below the form are relevant.<\/p>\n Place your form inside its own container and separate it from the rest of your content. Keep it nearby, but use borders, colors, and positioning so users know what\u2019s part of the form and what isn\u2019t, like this:<\/p>\n Forms should be easy to complete. Your users should be able to move through your form seamlessly and intuitively without using their mouse.<\/p>\n Use each form yourself before you publish it on a page. Ensure that you can navigate it smoothly and swiftly without touching your mouse (other than setting your cursor in the first field). If you\u2019re forced to reach for your mouse to complete a field or move between fields, consider redesigning the form.<\/p>\n Consider drop-down menus and radio buttons, for instance. To use a drop-down menu, the user has to click the field, scroll to the correct option, then click the option. That\u2019s three mouse motions. If you used a radio button instead, the user would only have to click once.<\/p>\n If possible, use a method that doesn\u2019t require the user to leave the keyboard at all.<\/p>\n One of the first rules of form design<\/a> (especially when you\u2019re talking about conversions<\/a>) is to reduce the number of fields as much as possible. This rule applies to form layout as well. Each field you add reduces the number of people who will complete the form.<\/p>\n Removing unnecessary fields makes determining your form layout pretty simple. In most cases, a majority of forms can be reduced to simple name and email fields. It\u2019s easy to layout a form with only two fields!<\/p>\n It\u2019s also important to consider the amount of effort you demand from the user to input data. Typing has a high cost to your users because it\u2019s time-consuming and error prone (especially on mobile). You may be able to simplify the user experience with radio buttons or dropdowns, even if they add a little complexity to your form layout.<\/p>\n In a form usability study<\/a>, Baymard Institute learned that users doubt their understanding of the form label when a field is longer or shorter than their data. This is especially true when users come across a field with a technical label (like a CVV - credit verification value) or data they don\u2019t normally input into forms.<\/p>\n You can improve usability and tighten your form layout by reducing your fields to the size of data you expect. A CVV field would only have space for three digits. A zip code field would only have space for six digits. You may not know how long a user\u2019s address will be, but it probably won\u2019t be 75 characters.<\/p>\n Users use field labels to understand what you expect them to do for each field. To prevent confusing your users, it\u2019s important to use labels the same way for every field. It\u2019s always best to place field labels just above<\/a> the input. Anywhere else is unintuitive.<\/p>\n Top-aligned labels help users scan the form quickly (to help them understand it). It also requires less horizontal space as compared to placing the labels to the left of the field. This means you can make your fields longer and more easily accessible on smaller screens.<\/p>\n Some form designers use the placeholder text (text inside the field) as labels. This is fine for simple forms, but it becomes a problem with complex or irregular fields.<\/p>\n For instance, it\u2019s okay to use placeholder text to ask for an email address, but you shouldn\u2019t use it to ask a question like \u201cWhat brought you to our store today?\u201d The placeholder text disappears when the user starts typing, which means they may forget what you asked.<\/p>\n It used to be standard to include a reset button at the bottom of the form, usually next to the submit button. Reset buttons have fallen out of style, but they still pop up every once in a while.<\/p>\n Reset buttons distract users from the primary call-to-action - the submit button. They also present an opportunity for the user to accidentally clear their own form when they didn\u2019t intend to. Few people used reset buttons, anyway, regardless of form length.<\/p>\n No matter how simple your forms are, some people will make mistakes, which means you\u2019ll have to make them aware of their errors. According to Usability Heuristics<\/a>, error messages should be graceful, actionable, and clear.<\/p>\n Error messages should stand out from the rest of the form. Use icons, text, colors, backgrounds, or other design elements to draw the user\u2019s attention to the problem. Place error messages right next to the fields with the error, rather than generically at the top or bottom of the form. Validate the forms in real time so the user knows there\u2019s an error before they hit the submit button.<\/p>\n It\u2019s tempting to use multiple columns for your forms so the user can see the entire form without scrolling, but this isn\u2019t necessary anymore. People don\u2019t mind scrolling<\/a>.<\/p>\n Using forms with multiple columns can be confusing for your users. Some will expect to finish one column before addressing the other. Other users will expect to progress horizontally before dropping to the next line.<\/p>\n Single column forms, however, are simple and easy to understand. There\u2019s only one way to go, so the user doesn\u2019t experience any type of confusion.<\/p>\n1. Don\u2019t Duplicate Paper Forms<\/h2>\n
2. Group the Form in its Own Container<\/h2>\n
![\"Form](\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2018\/09\/form-layout-grouping.png\")
<\/p>\n3. Reduce Mouse Usage<\/h2>\n
4. Remove Unnecessary Fields<\/h2>\n
![\"Form](\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2018\/09\/form-layout-cost.png\")
<\/p>\n5. Match Fields to the Input<\/h2>\n
6. Standardize Your Labeling<\/h2>\n
7. Get Rid of the Reset Button<\/h2>\n
![\"Form](\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2018\/09\/form-layout-reset-button.png\")
<\/p>\n8. Plan for User Errors<\/h2>\n
![\"Form](\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2018\/09\/form-layout-error-messages.png\")
<\/p>\n9. Best Form Layout: Single Column<\/h2>\n
![\"Form](\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2018\/09\/form-layout-logical-order.png\")
<\/p>\n